<template>
    <div class="page-header-wrap">
        <span v-for="(item, index) in breadCrumbList" :key="index" class="page-header-item">
           <span class="name" @click="handleJump(item, index)">{{item.name}}</span>
           <i class="iconfont icon-wanda-youxiao"></i>
        </span>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { pageJump } from '@/global/location-transfer';

const store = useStore();

// 第一个和最后一个面包屑无法点击
const breadCrumbList = computed(() => {
    return store.state.user.crumbData;
})

function handleJump(item, index) {
   if(index !==0 && index !== breadCrumbList.value?.length -1){
       pageJump(item.path);
   }
}

</script>

<style lang="scss" scoped>
.page-header-wrap {
    display: flex;
    align-items: center;
    color: var(--color-gray);
    font-size: 14px;
    .name {
        max-width: 400px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        &:hover{
            color: var(--main-active-text-color);
        }
    }

    i {
        margin: 0 9px;
        font-size: 12px;
    }
}
.page-header-item {
        &:last-child {
            i {
                display: none;
            }
            .name {
                cursor: auto;
                &:hover{
                   color: var(--color-gray);
                }
            }
        }
        &:first-child {
            .name {
                cursor: auto;
                &:hover{
                   color: var(--color-gray);
                }
            }
        }
    }
</style>